/*Alegreya font*/
@font-face {
    font-family: 'Alegreya';
    src: url('fonts/Alegreya-BoldItalic.woff2') format('woff2'),
        url('fonts/Alegreya-BoldItalic.woff') format('woff'),
        url('fonts/Alegreya-BoldItalic.eot'),
        url('fonts/Alegreya-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Alegreya-BoldItalic.svg#Alegreya-BoldItalic') format('svg'),
        url('fonts/Alegreya-BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*cursive font (comic sans)*/
@font-face {
    font-family: 'cursive';
    src: url('fonts/ComicSansMS.svg#ComicSansMS') format('svg'),
        url('fonts/ComicSansMS.ttf') format('truetype'),
        url('fonts/ComicSansMS.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cursive';
    src: url('fonts/ComicSansMS3.eot');
    src: url('fonts/ComicSansMS3.eot?#iefix') format('embedded-opentype'),
        url('fonts/ComicSansMS3.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: rgb(116, 78, 219);
    -webkit-text-size-adjust: none;
}

* {
    margin: 0;
    padding: 0;
}

.main {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    min-height: calc(100vh - 52px);
    /* for footer */
}

h1 {
    font-size: 45px;
    margin-top: 10px;
    font-family: 'cursive';
}

#aboutProgramm {
    font-size: 22px;
    font-family: 'Alegreya';
    margin-top: 10px;
    width: 800px;
    line-height: 28px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

h3 {
    font-size: 35px;
    margin-top: 30px;
    font-family: 'cursive';

}

#container-1 {
    border: 2px solid red;
    margin-top: 30px;
    font-family: 'cursive';
    position: relative;
}

#container-1 h4 {
    margin-top: 10px;
}

form {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#search {
    font-size: 25px;
    font-family: 'cursive';
    padding-bottom: 5px;
    width: 30%;
    outline: none;
    border: none;
    font-weight: 700;
    padding-left: 10px;
    border-radius: 0px 100px 100px 0px;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

input[type="search"]::-webkit-search-cancel-button {
    height: 20px;
    width: 20px;
    margin-top: 5px;
    margin-right: 5px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
    background-size: 20px 20px;
}

#search::placeholder {
    color: blueviolet;
    font-family: 'cursive';
    font-size: 25px;
    text-align: center;
    font-weight: 700;
    transition: 0.2s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

form div {
    background-color: #fff;
    display: flex;
}

.fa-search {
    font-size: 25px;
    align-self: center;
    padding-left: 10px;
}

#catalog {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'cursive';
    font-size: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-between;
    overflow-y: scroll;
    height: 330px;
}

.cl-catalog {
    width: fit-content;
    height: 30px;
    margin: 10px;
    padding: 8px;
    font-size: 22px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 35%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.bt {
    width: fit-content;
    height: fit-content;
    text-align: center;
    font-family: 'cursive';
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
    margin-top: 30px;
    padding: 5px;
    background-color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    /* -webkit-border-radius: 0;
    -moz-border-radius: 0; */
}

.bt a {
    text-decoration: none;
    color: black;
    background-color: #fff;
}

#answer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
    align-content: space-between;
}

#answer h1,
#addMore h1 {
    margin: 10px;
    font-size: 30px;
    height: 52px;
    line-height: 28px;
}

.notEnough-Ingr {
    font-family: 'cursive';
    font-size: 25px;
    font-weight: 700;
}

#addMore {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
    align-content: space-between;
}

.cl-answer,
.addMore-answer {
    margin: 30px;
    width: 300px;
    display: flex;
    flex-direction: column;
}

.cl-answer p,
.addMore-answer p {
    font-family: 'cursive';
    padding: 5px;
    margin-top: 20px;
    height: 100px;
    font-size: 18px;
    font-weight: 700;
}

.cl-answer span,
.addMore-answer span {
    text-transform: uppercase;
    color: #fff;
}

#addMore {
    margin-left: auto;
    margin-right: auto;
}

#addMoreFirstP {
    height: fit-content;
    width: fit-content;
    font-family: 'cursive';
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: none;
}

#addMoreFirstP a {
    text-decoration: none;
    color: black;
}

#addMoreFirstP a:hover {
    color: #fff;
}

#Sign-footer {
    background: #000000;
    height: 40px;
    margin-top: 2px;
    line-height: 40px;
}

#sign-P {
    text-align: center;
    color: #D0D0D0;
}

#sign-P a {
    color: #FFFFFF;
}

::-webkit-scrollbar {
    width: 15px;
    background-color: #000000;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(116, 78, 219);
}

.image {
    width: 300px;
    height: 250px;
}


@media(max-width:1240px) {
    .image {
        width: 250px;
        height: 200px;
    }

    .cl-answer,
    .addMore-answer {
        width: 250px;
    }

    .cl-answer p,
    .addMore-answer p {
        font-size: 15px;
        height: 75px;
    }

    #answer h1 {
        font-size: 25px;
    }
}

@media(max-width:910px) {
    #search {
        width: 60%;
    }

    #aboutProgramm {
        width: fit-content;
    }
}

@media(max-width:775px) {
    .main {
        margin-right: 8%;
        margin-left: 8%;
    }
}

@media (max-width:738px) {

    .cl-answer p,
    .addMore-answer p {
        height: fit-content;
        margin-top: 5px;
        font-size: 13px;
    }

    #answer h1,
    #addMore h1 {
        height: fit-content;
    }
}

@media(max-width:550px) {
    #search {
        width: 85%;
        font-size: 20px;
        padding-bottom: 0;
    }

    #search::placeholder {
        font-size: 20px;
        padding-bottom: 0;
    }

    .fa-search {
        font-size: 20px;
    }

    #aboutProgramm {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width:1200px) {
    .main {
        width: auto;
    }
}

.hide {
    display: none;
}

form,
#search,
.fa-search,
#catalog,
.cl-catalog,
.bt {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}